<script setup>
	import {
		ref,
		reactive,
		watch,
		computed,
		onMounted,
	} from 'vue'

	import {
		ElMessage
	} from 'element-plus'
	import api from '@/api/api';
	import util from '@/utils/util';

	// 参数接收
	const props = defineProps({
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
	})

	// 参数
	const pages = reactive({

		api_name: 'getNotice',

		api_data: {
			pageNum: 1,
			pageSize: 7,
		},

		nav: [{
				name: '通知公告',
				id: 'getNotice',
				to: '/announcement-details',
			},
			{
				name: '赛事新闻',
				id: 'getNews',
				to: '/news-details',
			},
			{
				name: '政策文件',
				id: 'getPolicy',
				to: '/policy-details',
			},
		],

		list: [],
		total: 0,
	})

	// 监听
	watch(() => pages.api_name, (n) => {
		init();
	})

	// 安装
	onMounted(async () => {
		init();
	})

	// 初始化
	async function init() {
		// 打开加载
		util.showLoading();

		const api_name = pages.api_name || '';
		if (!api_name) return;

		// 获取对应列表 getNotice、getNewsg、etPolicy
		const res = await api.pagingApis[api_name](pages.api_data);
		pages.list = res.rows;
		pages.total = res.total;

		// 关闭加载
		util.hideLoading();
	}

	// 跳转
	function changeTo(item) {
		const obj = pages.nav.find(item => item.id == pages.api_name);
		util.to(obj.to, {
			id: item.id
		});
	}

	// 组件暴露
	defineExpose({})

	// 回调
	const emit = defineEmits(['change'])
</script>

<template>
	<div class="layout2-right">

		<!-- top -->
		<div class="layout2-right-top">
			<p class="nav-li" :class="{'active':pages.api_name == item.id}" v-for="(item,index) in pages.nav"
				:key="index" @click="pages.api_name = item.id">
				{{item.name}}
			</p>
		</div>

		<!-- list -->
		<div class="list">
			<div class="list-li" v-for="(item,index) in pages.list" :key="index" @click="changeTo(item)">
				<img :src="util.getImageUrl('right-right.png')" />
				<view class="title-view">
					<p class="title thd">{{item.title}}</p>
				</view>
				<p class="time">{{util.getTime(item.createTime)}}</p>
			</div>

			<p class="none_data" v-if="!pages.list.length">暂无数据</p>
		</div>

	</div>
</template>

<style lang="scss" scoped>
	.layout2-right {
		// line-height: 50px;
		display: flex;
		flex-direction: column;

		.layout2-right-top {
			height: 60px;
			line-height: 60px;
			background: #F5F8FD;
			display: flex;
			text-align: center;

			.nav-li {
				cursor: pointer;
				flex: 1;
				font-size: 18px;
				color: #A8B1BB;
				transition: .1s;
				background-color: #F5F8FD;

				&.active {
					color: #5173F2;
					background: #EFF4FD;
				}
			}
		}

		.list {
			flex: 1;
			margin-top: 30px;
			display: flex;
			flex-direction: column;
			// justify-content: space-between;

			.list-li {
				cursor: pointer;
				transition: .3s;
				// border-bottom: 1px solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 16px;
				line-height: 59px;

				img {
					width: 15.16px;
					height: 15.16px;
					margin: 0 15px;
				}

				.title-view {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;

					p {
						font-size: 16px;
						color: #333333;
						max-width: 500px;
					}
				}

				.time {
					color: #999999;
				}
			}

			.list-li:hover {
				p {
					color: #5173F2;
				}

				// border-bottom: 1px solid #5173F2;
			}
		}
	}
</style>